<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>




<html style="font-size: 50px;" g_init="2210240201807052118">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1"> -->

    <title>员工首页</title>

    <link rel="stylesheet" type="text/css" href="<%=path%>/css/aem-h5/aem-h5.css" />
    <link href="<%=path %>/css/aem-h5/aem-invite-style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    	.index {
    		height: 100%;
    		overflow: scroll;
    	}
    	.progress-circle {
    		position: relative;
    	}
    	.task-icon {
    		position: absolute;
    		width: 0.8rem;
    		height: 0.8rem;
    	}
    	.activity-thumb {
    		position: relative;
    	}
    	.activity-thumb .is-join {
    		position: absolute;
    		top: 0;
    		right: 0;
    		width:1.5rem;
			height: 0.6rem;
			font-size:0.24rem;
			color: #6f2214;
			text-align: center;
			line-height: 0.6rem;
    	}
    	.activity-thumb .is-join.has-join {
    		opacity: 0.9;
			background: #feca01;
    	}
    	.activity-thumb .is-join.not-join {
    		background:rgba(255,255,255,0.90);
    	}
    	.activity-thumb .thumb {
    		width: 100% !important;
    	}
    	.invited{
    		background: #ffffff;
		    border-radius: 0.2rem;
		    width: 6rem;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    margin-left: -3rem;
		    margin-top: -3.2rem;
		    padding-bottom: 0.3rem;
    	}
    	.index .header-wrap .header .user-info {
    		background-size: cover !important;
    	}
    	.index .header-wrap .header .user-info .avatar {
    		display: inline-block;
    	}
    	.staff-name {
    		display: inline-block;
    	}
    	.header .score{
    		top: 2.0rem !important;
    	}
    	article, aside, footer, header, hgroup, nav, section, audio, canvas, video, img {
		    display: inline-block !important;
		}
    	#staff-ranking {
    		justify-content: flex-start;
    	}
    	#staff-ranking .hero-rank {
    		margin-left: 0.15rem;
    		margin-right: 0.15rem;
    	}
    	#p-left{
    		display:inline;
    	}
    	#p-right{
    		display:inline;
    		float:right;
    		width: 0.5rem;
    	}
    	#staff-img{
    		margin: 0 auto;
    	}
    </style>
</head>
<body>
<div id="app">
    <div data-v-7ed3d5b2="" class="index">
        <div data-v-7ed3d5b2="" class="header-wrap">
            <div data-v-7ed3d5b2="" class="header">
                <div data-v-7ed3d5b2="" class="user-info">
                    <img data-v-7ed3d5b2="" onclick= "staffHome.personalcenter()" id="head-img" src="<%=path %>/images/aem/default_headImg.png" class="avatar">
                    <p data-v-7ed3d5b2="" id="staff-name" class="name">加载中...</p>
                    <img data-v-7ed3d5b2="" src="" class="gift">
                </div>
                <div data-v-7ed3d5b2="" class="score">
                    <div data-v-7ed3d5b2="" class="title">我的战绩</div>
                    <div data-v-7ed3d5b2="" class="item-wrap">
                        <div data-v-7ed3d5b2="" class="done-task">
                            <div data-v-27b17b8a="" data-v-7ed3d5b2="" class="progress-circle">
                            	<img class="task-icon" src="<%=path %>/images/aem/staff-defeat-opponent.png">
                                <svg data-v-27b17b8a="" width="0.8rem" height="0.8rem" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                    <circle data-v-27b17b8a="" cx="50" cy="50" r="50" fill="transparent" class="progress-background"></circle>
                                    <circle id="doneTask" data-v-27b17b8a="" cx="50" cy="50" r="50" fill="transparent" stroke-dasharray="314.1592653589793" stroke-dashoffset="314.1592653589793" class="progress-bar"></circle>
                                </svg>
                            </div>
                            <p data-v-7ed3d5b2="" class="text">完成任务</p>
                            <p data-v-7ed3d5b2="" class="number">
                                <span data-v-7ed3d5b2="" id="finish-task">0</span>%
                            </p>
                        </div>
                        <div data-v-7ed3d5b2="" class="total-score">
                            <img data-v-7ed3d5b2="" src="" class="total-score-icon">
                            <p data-v-7ed3d5b2="" class="text">累计获得积分</p>
                            <p data-v-7ed3d5b2="" class="number">
                                <span data-v-7ed3d5b2="" id="accumulative-score">0</span>
                            </p>
                        </div>
                        <div data-v-7ed3d5b2="" class="defeat-opponent">
                            <div data-v-27b17b8a="" data-v-7ed3d5b2="" class="progress-circle">
                            <img class="task-icon" src="<%=path %>/images/aem/staff-done-task.png">
                                <svg data-v-27b17b8a="" width="0.8rem" height="0.8rem" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                    <circle data-v-27b17b8a="" cx="50" cy="50" r="50" fill="transparent" class="progress-background"></circle>
                                    <circle data-v-27b17b8a="" id="defeat-opponent-circle" cx="50" cy="50" r="50" fill="transparent" stroke-dasharray="314.1592653589793" stroke-dashoffset="94.24777960769381" class="progress-bar"></circle>
                                </svg>
                            </div>
                            <p data-v-7ed3d5b2="" class="text">击败对手</p>
                            <p data-v-7ed3d5b2="" class="number">
                                <span data-v-7ed3d5b2="" id="defeat-opponent">0</span>%
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div data-v-7ed3d5b2="" class="btn-wrap" style="margin-top:20px">
                <p data-v-7ed3d5b2="" onclick="staffHome.aemList()" class="join-task">参加任务赚积分</p>
                <p data-v-7ed3d5b2="" onclick="staffHome.invitingFriends()" class="invite-friends">邀请好友赚积分</p>
            </div>
        </div>
        <div data-v-7ed3d5b2="" class="hero-rank-wrap">
            <p data-v-7ed3d5b2="" id="p-left" onclick="staffHome.staffRanking()" class="title">本周英雄榜Top3</p>
            <img data-v-7ed3d5b2="" id="p-right" onclick="staffHome.staffRanking()" src="">
            <img data-v-7ed3d5b2="" src="" class="next-icon">
            <div data-v-7ed3d5b2="" id="staff-ranking" class="hero-list">
                <%--<div data-v-43210d38="" data-v-7ed3d5b2="" class="hero-rank">
                    <img data-v-43210d38="" src="http://www.qqtxwm.com/uploads/allimg/170222/1-1F2221P402.png" class="avatar">
                    <p data-v-43210d38="" class="name">黄蓉</p>
                    <p data-v-43210d38="" class="address">北部大区北京分部常营二店</p>
                    <p data-v-43210d38="" class="score">+
                        <span data-v-43210d38="">2000</span> 积分
                    </p>
                    <img data-v-43210d38="" src="" class="rank-icon">
                </div>
                <div data-v-43210d38="" data-v-7ed3d5b2="" class="hero-rank">
                    <img data-v-43210d38="" src="http://www.qqtxwm.com/uploads/allimg/170222/1-1F2221P402.png" class="avatar">
                    <p data-v-43210d38="" class="name">黄蓉</p>
                    <p data-v-43210d38="" class="address">北部大区北京分部常营二店</p>
                    <p data-v-43210d38="" class="score">+
                        <span data-v-43210d38="">2000</span> 积分
                    </p>
                    <img data-v-43210d38="" src="" class="rank-icon">
                </div>
                <div data-v-43210d38="" data-v-7ed3d5b2="" class="hero-rank">
                    <img data-v-43210d38="" src="http://www.qqtxwm.com/uploads/allimg/170222/1-1F2221P402.png" class="avatar">
                    <p data-v-43210d38="" class="name">黄蓉</p>
                    <p data-v-43210d38="" class="address">北部大区北京分部常营二店</p>
                    <p data-v-43210d38="" class="score">+
                        <span data-v-43210d38="">2000</span> 积分
                    </p>
                    <img data-v-43210d38="" src="" class="rank-icon">
                </div>--%>
            </div>
        </div>
        <div data-v-7ed3d5b2="" class="department-rank-wrap">
            <p data-v-7ed3d5b2="" id="p-left" onclick="staffHome.departmentRanking()" class="title">本周部门排行Top3</p>
			<img data-v-7ed3d5b2="" id="p-right" onclick="staffHome.departmentRanking()" src="">
            <img data-v-7ed3d5b2="" src="" class="next-icon">
            <div data-v-7ed3d5b2="" class="department-list">
                <%--<div data-v-f534367c="" data-v-7ed3d5b2="" class="department-rank">
                    <img data-v-f534367c="" src="" class="number">
                    <div data-v-f534367c="" class="department-icon-wrap">
                        <img data-v-f534367c="" src="" class="department-icon">
                        <img data-v-f534367c="" src="" class="department-rank-icon">
                    </div>
                    <div data-v-f534367c="" class="info">
                        <p data-v-f534367c="" class="depart-name">朝阳门店</p>
                        <p data-v-f534367c="" class="depart-address">北部大区北京分部</p>
                    </div>
                    <p data-v-f534367c="" class="depart-score">+
                        <span data-v-f534367c="">3500</span>积分/人
                    </p>
                </div>
                <div data-v-f534367c="" data-v-7ed3d5b2="" class="department-rank">
                    <img data-v-f534367c="" src="" class="number">
                    <div data-v-f534367c="" class="department-icon-wrap">
                        <img data-v-f534367c="" src="" class="department-icon">
                        <img data-v-f534367c="" src=""
                            class="department-rank-icon">
                    </div>
                    <div data-v-f534367c="" class="info">
                        <p data-v-f534367c="" class="depart-name">朝阳门店</p>
                        <p data-v-f534367c="" class="depart-address">北部大区北京分部</p>
                    </div>
                    <p data-v-f534367c="" class="depart-score">+
                        <span data-v-f534367c="">3500</span>积分/人
                    </p>
                </div>
                <div data-v-f534367c="" data-v-7ed3d5b2="" class="department-rank">
                    <img data-v-f534367c="" src="" class="number">
                    <div data-v-f534367c="" class="department-icon-wrap">
                        <img data-v-f534367c="" src="" class="department-icon">
                        <img data-v-f534367c="" src="" class="department-rank-icon">
                    </div>
                    <div data-v-f534367c="" class="info">
                        <p data-v-f534367c="" class="depart-name">朝阳门店</p>
                        <p data-v-f534367c="" class="depart-address">北部大区北京分部</p></div>
                    <p data-v-f534367c="" class="depart-score">+
                        <span data-v-f534367c="">3500</span>积分/人
                    </p>
                </div>--%>
            </div>
        </div>
        <div data-v-7ed3d5b2="" class="new-activity-wrap">
            <p data-v-7ed3d5b2="" id="p-left" onclick="staffHome.aemList()" class="title">最新任务</p>
			<img data-v-7ed3d5b2="" id="p-right" onclick="staffHome.aemList()" src="">
            <img data-v-7ed3d5b2="" src="" class="next-icon">
            <div data-v-7ed3d5b2="" id="activity" class="activity-list">
                <!-- <div data-v-580431b3="" data-v-7ed3d5b2="" class="activity-thumb">
                    <img data-v-580431b3="" id="aem-img" src="https://img.zcool.cn/community/014cec5b31d83ca80121b994456dc2.jpg" class="thumb">
                    <p data-v-580431b3="" id="aem-title" class="title">黄金之旅，会员专享</p>
                    <p data-v-580431b3="" id="aem-time" class="time">任务时间：2018-5-12 12:00至2018-5-30 12:00</p>
                </div> -->
            </div>
        </div>
        <div data-v-7ed3d5b2="" class="hot-activity-wrap">
            <p data-v-7ed3d5b2="" id="p-left" onclick="staffHome.aemList()" class="title">热门任务</p>
			<img data-v-7ed3d5b2="" id="p-right" onclick="staffHome.aemList()" src="">
            <img data-v-7ed3d5b2="" src="" class="next-icon">
            <div data-v-7ed3d5b2="" id="activity-list" class="activity-list">
                <%--<div data-v-580431b3="" data-v-7ed3d5b2="" class="activity-thumb">
                    <img data-v-580431b3="" src="https://img.zcool.cn/community/014cec5b31d83ca80121b994456dc2.jpg" class="thumb">
                    <p data-v-580431b3="" class="title">黄金之旅，会员专享</p>
                    <p data-v-580431b3="" class="time">任务时间：2018-5-12 12:00至2018-5-30 12:00</p>
                </div>
                <div data-v-580431b3="" data-v-7ed3d5b2="" class="activity-thumb">
                    <img data-v-580431b3="" src="https://img.zcool.cn/community/014cec5b31d83ca80121b994456dc2.jpg" class="thumb">
                    <p data-v-580431b3="" class="title">黄金之旅，会员专享</p>
                    <p data-v-580431b3="" class="time">任务时间：2018-5-12 12:00至2018-5-30 12:00</p>
                </div>
                <div data-v-580431b3="" data-v-7ed3d5b2="" class="activity-thumb">
                    <img data-v-580431b3="" src="https://img.zcool.cn/community/014cec5b31d83ca80121b994456dc2.jpg" class="thumb">
                    <p data-v-580431b3="" class="title">黄金之旅，会员专享</p>
                    <p data-v-580431b3="" class="time">任务时间：2018-5-12 12:00至2018-5-30 12:00</p>
                </div>--%>
            </div>
        </div>
    </div>
</div>

<div id="aem-join-dialog" class="aem-join-gray" style="display: none">
    <div class="prop-bg">
        <img src="<%=path%>/images/aem/close.png" class="close"  onclick="staffHome.dialogClose()"/>
        <div class="prop-tt">
            任务提示
            <img src="<%=path%>/images/aem/star.png" class="s-left"/>
            <img src="<%=path%>/images/aem/star.png" class="s-right"/>
        </div>
        <div class="remind">
            您即将进入活动链接页面，分享后点击左上角返回即可完成任务。
        </div>
        <ul class="rewardbg">
            <li>
            	<span class="r-tt">分享奖励：</span>
                <div class="integral-count"><img src="<%=path%>/images/aem/integral.png"><span id="span-share-score"></span></div>
            </li>
            <li style="border-bottom:none!important;">
                <span class="r-tt">好友点击：</span>
                <div class="integral-count"><img src="<%=path%>/images/aem/integral.png"><span id="span-click-score"></span></div>
            </li>
        </ul>
        <div class="button-bg clearfix">
            <div class="cancel" onclick="staffHome.dialogClose()">取消</div>
            <div class="accept" onclick="staffHome.acceptTask()">接受任务</div>
        </div>
        <div class="bottom-bg"></div>
    </div>
</div>

<div class="gray" style="background: url(<%=path %>/images/aem/gray.png) repeat;">
    <div class="invited">
        <img src="<%=path %>/images/aem/close.png" class="close">
        <div class="prop-tt">
            奖励规则说明
            <img src="<%=path %>/images/aem/star.png" class="s-left">
            <img src="<%=path %>/images/aem/star.png" class="s-right">
        </div>
        <!-- prop-tt end -->
        <div class="task-bg">
            <div class="task-ct">
                <div class="task-item">
                    <div class="task-tt">参加任务赚积分</div>
                    <div class="task-item-ct">点击参加任务赚积分按钮，进入任务中心点
                        击任务分享，即可获得积分奖励，赶快行动吧！
                    </div>
                </div>
                <!-- task-item end -->
                <div class="task-item invite-fans">
                
                </div>
                <div class="task-item invite-member">
                
                </div>
               <!--  
                    <div class="task-tt">邀请粉丝送积分</div>
                    <div class="task-item-ct">
                        2018年10月10日至2018年12月12日，邀请
                        ＊＊人关注公众号可得＊＊积分，超过＊＊人，
                        每邀请＊＊人可获得＊＊＊积分。

                    </div>
                
                 task-item end
                
                    <div class="task-tt">邀请会员送积分</div>
                    <div class="task-item-ct">
                        2018年10月10日至2018年12月12日，邀请
                        ＊＊人关注公众号可得＊＊积分，超过＊＊人，
                        每邀请＊＊人可获得＊＊＊积分。

                    </div>
                  -->
                <!-- task-item end -->
            </div>
            <!--  task-ct end -->
        </div>
        <!--  task-bg end -->
        <div class="bottom-bg">
        </div>
        <!-- bottom-bg end -->
    </div>
</div>
</body>
<!-- 任务列表主脚本文件 - Yangcl -->
<script type="text/javascript" src="<%=path%>/js/aem/client/aem-staff-home.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<%-- <script type="text/javascript" src="<%=path%>/js/aem/client/rem.js"></script>
 --%><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
 <link rel="stylesheet" type="text/css" href="<%=path%>/css/aem-h5/aem-h5-dialog-style.css" >
<script type="text/javascript">
	var accessToken=$.cookie('accessToken');
   	//var accessToken ='07fb7a656dc11d5d942dbd597b8027f8';
    $(function() {
        staffHome.init(accessToken).queryStaffHome();
        staffHome.init(accessToken).staffLoginStatus();
        staffHome.init(accessToken).initInvite();
        //弹框控制
    	$(".gift").click(function (){
    		 $(".gray").show();
    	});
        // 弹窗关闭
        $(".close").click(function () {
            $(".gray").hide();
        })
    });
</script>
</html>